<template>
    <div class="aiScan">
        <div class="topbar">
            <span>智能识物</span>
            <van-button type="primary" size="mini" color="#FFFFFF">
                <template #icon>
                    <i class="iconfont icon-lishijilu" style="color: #2A5C8D; font-size: 20px;"></i>
                </template>
            </van-button>
        </div>
        <div class="buttonBar">
            <van-button>
                <template #icon>
                    <i class="iconfont icon-xiangji" style="color: #FFFFFF; font-size: 3.4rem;"></i>
                </template>
                拍照识别
            </van-button>
            <van-uploader :after-read="afterRead">

                <van-button>
                    <template #icon>
                        <i class="iconfont icon-xiangce" style="color: #FFFFFF; font-size: 3.4rem;"></i>
                    </template>
                    上传文件
                </van-button>
            </van-uploader>

        </div>
        <div class="remindText">
            <span>支持识别物品、文字及危险场景</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import useImageStore from '@/store/imageStore.js'
import { useRouter } from 'vue-router'; // 新增路由引入
import { showLoadingToast, closeToast, showNotify } from 'vant'; // 导入 Vant 组件
import axios from 'axios'

const router = useRouter(); // 获取路由实例
const imageStore = useImageStore();

const afterRead = async (file) => {
    const toast = showLoadingToast({
        message: '分析中...',
        forbidClick: true,
        duration: 0 // 持续显示直到手动关闭
    });

    try {
        // 存储图片到Pinia
        imageStore.uploadImage(file.file);
        // 2. 调用后端接口处理业务逻辑（如调用大模型）
        const formData = new FormData();
        formData.append('image', file.file); // 上传文件
        const { data } = await axios.post('http://localhost:3000/api/analyze', formData, {
            headers: { 'Content-Type': 'multipart/form-data' }
        });

        // 3. 跳转到结果页，传递图片数据和分析结果
        if (data.success) {
            // 存储分析结果到Pinia
            imageStore.setAnalysisResult(data.analysis);
            router.push({
                path: '/scan-result',
            });
        }
    } catch (error) {
        console.error('分析失败:', error)
        showNotify({
            type: 'danger',
            message: error.response?.data?.error || error.message || '请求失败'
        })
        imageStore.clearData()
    } finally {
        closeToast();
    }
};

</script>

<style lang="less" scoped>
.aiScan {
    width: 100vw;
    height: calc(100vh - 7rem);

    .topbar {
        width: 100%;
        height: 5.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative; // 新增定位上下文

        span {
            flex: 1;
            text-align: center;
            font-family: Roboto, Roboto;
            font-weight: 500;
            font-size: 24px;
            color: #2A5C8D;
            line-height: 32px;

            font-style: normal;
            text-transform: none;
        }

        .van-button {
            position: absolute;
            right: 1.2rem;
        }
    }

    .buttonBar {
        width: 31.1rem;
        height: 38.4rem;
        padding: 4.8rem 0;
        box-sizing: border-box;
        margin: 0 auto; // 新增水平居中

        :deep(.van-button) {
            width: 311px;
            height: 128px;
            background: linear-gradient(158deg, #FF6B35 0%, #FF8E53 100%), rgba(0, 0, 0, 0);
            border-radius: 12px 12px 12px 12px;

            .van-button__content {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                .van-button__text {
                    font-family: Roboto, Roboto;
                    font-weight: 400;
                    font-size: 20px;
                    color: #FFFFFF;
                    line-height: 28px;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }
        }

        .van-uploader {
            margin-top: 3.2rem;

            :deep(.van-button) {
                width: 31.1rem;
                height: 12.8rem;
                background: #2A5C8D;
                border-radius: 12px 12px 12px 12px;

                .van-button__content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .van-button__text {
                        font-family: Roboto, Roboto;
                        font-weight: 400;
                        font-size: 20px;
                        color: #FFFFFF;
                        line-height: 28px;
                        text-align: center;
                        font-style: normal;
                        text-transform: none;
                    }
                }
            }
        }

    }

    .remindText {
        width: 100%;
        text-align: center;

        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 14px;
        color: #9CA3AF;
        line-height: 20px;

        font-style: normal;
        text-transform: none;
    }
}
</style>